<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<link href="./css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<link rel="stylesheet" type="text/css" href="css/userManagement.css"/>
	<body>
		<div class="background">
			<div class="logo">
				<img src="img/Logo.png" >
			</div>
			<h1>用户管理系统</h1>
			<div id="left">
				<img src="img/bg2.png" >
			</div>
			<div id="right">
				<div id="app">
					<span class="userli">用户列表</span> 
					<input type="text" class="search" placeholder="输入关键字"/>
					<div class="search-icon">
						<img src="img/搜索.png" >
					</div>
					<div class="htmleaf-container">
					<div class="container">
					<div class="row">
						      
					<div class="col-sm-8 col-sm-offset-2">
					<table class="table table-bordered">
						<thead>
							<tr>
								<th>姓名</th>
								<th>工资号</th>
								<th>密码</th>
								<th>修改信息</th>
								<th>删除</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(item,index) in user">
								<td>{{item.name}}</td>
								<td>{{item.payrollNumber}}</td>
								<td>{{item.password}}</td>
								<td><button type="button" @click="resetHandle(index)">修改信息</button></td>
								<td><button type="button" @click="removeHandle(index)">移除</button></td>
							</tr>
						</tbody>
					</table>
						<nav  class="pagination-container">
							<ul class="pagination" id = "buttons">
								<li class="first disabled"><a href="#">首页</a></li>
								<li class="prev disabled"><a href="#">上一页</a></li>
								<li class="page active"><a href="#">1</a></li>
								<li class="page"><a href="#">2</a></li>
								<li class="next"><a href="#">下一页</a></li>
								<li class="last"><a href="#">尾页</a></li>
								<li class="pageNumbers"><a href="#">Page 1/2</a></li>
							</ul>
						</nav>
					</div>
					</div>
					</div>
					</div>
					<button type="button" id="reset" @click="goReset">重置管理员账户密码</button>
					<button type="button" id="return" @click="Return">返回</button>
				</div>
			</div>
		</div>
		
		<script src="js/vue%20.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/userManagement.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="js/paginathing.js"></script>
		<script type="text/javascript">
		//   jQuery(document).ready(function($){
		//     for (var i = 1; i <= 150; i++) {
		//       $('.list-group').append('<li class="list-group-item"> Item ' + i + '</li>');
		//     }
		
		//     $('.table tbody').paginathing({
		//       perPage: 3,
		//       insertAfter: '.table',
		//       pageNumbers: true
		//     });
		//   });
		</script>
	</body>
</html>
